<template>
  <div class="chariging_list_wrapper">
    <!-- 头部搜索部分 -->
    <div class="orderHeader" style="margin: 5px 0px 0px 0px">
      <div class="orderSearch">
        <el-form ref="form" :model="searchParams" :inline="true">
          <el-form-item label="规则名称" size="mini">
            <el-input
              v-model="searchParams.name"
              clearable
              placeholder="请填写规则名称进行搜索"
            />
          </el-form-item>
          <el-form-item label="承运类型" size="mini">
            <el-select
              v-model="searchParams.transport_type_id"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in transportTypeData"
                :label="item.name"
                :value="item.id * 1"
                :key="item.id"
                >{{ item.name }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="计费方式" size="mini">
            <el-select
              v-model="searchParams.billing_way"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in patternData"
                :label="item.item_name"
                :value="item.item_code"
                :key="item.item_code"
                >{{ item.item_name }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item size="mini">
            <el-button
              data-tracker="P44-1"
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              data-tracker="P44-2"
              type="primary"
              icon="el-icon-refresh"
              @click="handleReset"
              >重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="actions" style="margin-bottom: 10px">
      <div class="left">
        <el-button
          data-tracker="P44-3"
          v-permission="'billing_rule_create'"
          type="primary"
          plain
          size="mini"
          @click="handleClickCreate"
        >
          新增</el-button
        >
        <el-button
          data-tracker="P44-4"
          v-permission="'billing_rule_delete'"
          type="primary"
          plain
          size="mini"
          @click="handleClickDelete"
        >
          删除</el-button
        >
      </div>
      <div class="right">
        <el-pagination
          background
          :current-page="paginations.pageIndex"
          :page-sizes="paginations.pageSizes"
          :page-size="paginations.pageSize"
          :layout="paginations.layout"
          :total="paginations.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-table
      :max-height="maxheight"
      ref="multipleTable"
      :data="tableData"
      border
      align="center"
      stripe
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="45"> </el-table-column>
      <el-table-column
        prop=""
        fixed
        label="序号"
        width="50"
        type="index"
      ></el-table-column>
      <el-table-column prop="name" label="规则名称" width="180">
      </el-table-column>
      <el-table-column prop="transport_type_name" label="承运类型" width="180">
      </el-table-column>
      <el-table-column prop="billing_way" label="计费方式" width="180">
        <template slot-scope="scope">
          {{ getWayText(scope.row.billing_way) }}
          <!-- {{patternData[scope.row.billing_way]}} -->
        </template>
      </el-table-column>
      <!-- <el-table-column prop="start_time" label="有效期开始时间" width="180">
        <template slot-scope="scope">
          <span v-time="scope.row.start_time"></span>
        </template>
      </el-table-column>
      <el-table-column prop="end_time" label="有效期结束时间" width="180">
        <template slot-scope="scope">
          <span v-time="scope.row.end_time"></span>
        </template>
      </el-table-column> -->
      <el-table-column prop="status" label="状态" width="180">
        <template slot-scope="scope">
          {{ ["启用", "禁用"][scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column prop="creator_name" label="创建人" min-width="180">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" min-width="180">
        <template slot-scope="scope">
          <span v-time="scope.row.create_time"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        fixed="right"
        align="center"
        label="操作"
        width="140"
      >
        <template slot-scope="scope">
          <el-button
            data-tracker="P44-5"
            v-permission="'billing_rule_detail'"
            style="margin-right: 10px"
            type="text"
            plain
            size="mini"
            @click="handleClickEdit(scope.row, 'detail')"
            >详情
          </el-button>
          <el-button
            data-tracker="P44-6"
            v-permission="'billing_rule_update'"
            style="margin-right: 10px"
            type="text"
            plain
            size="mini"
            @click="handleClickEdit(scope.row, 'edit')"
            >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  BillingRuleListFn,
  BillingRuleDeleteFn,
} from "@/api/companymanagement";
import { dictionanryList } from "@/page/material/common/common";
import { getTransportsList } from "@/api/waybill";
export default {
  name: "chargingrulesList",
  components: {},
  props: [],
  data() {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      tableData: [],
      searchParams: {},
      checkedIds: [],
      patternData: [
        {
          item_code: "8",
          item_name: "包装数量",
        },
        {
          item_code: "1",
          item_name: "货物件数",
        },
        {
          item_code: "2",
          item_name: "体积",
        },
        {
          item_code: "3",
          item_name: "重量",
        },
        {
          item_code: "6",
          item_name: "一口价",
        },
      ],
      transportTypeData: [],
      maxheight: 400,
    };
  },
  mounted() {
    this.getDictionaryData();

    this.getRulesListFn();
    // dictionanryList(["pricing_meth"]).then((res) => {
    //   const data = res.data.list["pricing_meth"];
    //   data.forEach(item => {
    //     const { item_code, item_name } = item;
    //     this.patternData[item_code] = item_name;
    //   });
    // });
  },
  methods: {
    async getDictionaryData() {
      let result = await getTransportsList({ is_all: false });
      this.transportTypeData = result.data.data;
    },
    // 获取列表数据
    getRulesListFn() {
      BillingRuleListFn({
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        ...this.searchParams,
      }).then((res) => {
        this.tableData = res.data.list || [];
        if (this.tableData.length > 6) {
          //两排操作栏
          this.maxheight = document.documentElement.clientHeight - 265;
        } else {
          this.maxheight = "auto";
        }

        this.paginations.total = res.data.pagination.total;
      });
    },
    handleSearch() {
      this.paginations.pageIndex = 1;
      this.getRulesListFn();
    },
    handleReset() {
      this.searchParams = {};
      this.paginations.pageIndex = 1;
      this.getRulesListFn();
    },
    getWayText(index) {
      const data = [];
      this.patternData.forEach((item) => {
        const { item_code, item_name } = item;
        data[item_code] = item_name;
      });
      return data[index] || "";
    },
    handleSelectionChange(val) {
      this.checkedIds = val.map((item) => item.id);
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getRulesListFn();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getRulesListFn();
    },
    handleClickEdit(row, mode) {
      const id = row.id;
      this.$router.push({
        name: "chargingrules",
        query: { id, mode },
      });
    },
    handleClickCreate() {
      this.$router.push({
        name: "chargingrules",
      });
    },
    handleClickDelete() {
      BillingRuleDeleteFn({ ids: this.checkedIds }).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getRulesListFn();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.chariging_list_wrapper {
  padding: 10px 15px;
  background-color: #fff;
}
</style>